<template>
    <div class="right listP" id="tab_data">
        <div class="list_tit">
            <span>产品列表</span>
            <router-link to="/addPro"><button class="btn btn-primary btn-sm pull-right">+添加商品</button></router-link>
        </div>
        <form action="" class="form-inline">
            <input type="text" class="form-control text" v-model="txt"/>
            <button class="btn btn-default" v-on:click.prevent="search">查询</button>
        </form>
        <div class="table_wrap">
            <table class="table text-center table-striped">
                <thead>
                    <td><input type="checkbox" v-on:click="allSel" :checked="all" /></td>
                    <td>ID编号</td>
                    <td>产品</td>
                    <td>名称</td>
                    <td>市场价</td>
                    <td>会员价</td>
                    <td>库存</td>
                    <td>精品</td>
                    <td>新品</td>
                    <td>热销</td>
                    <td>操作</td>
                </thead>
                <tbody>
                    <tr v-for="(i,$index) in filterList" v-if="$index>=start&&$index<end">
                        <td><input type="checkbox" :checked="i.flag" v-on:click="singleClick($index)" /></td>
                        <td>{{i.id}}</td>
                        <td>{{i.sel}}</td>
                        <td>{{i.name}}</td>
                        <td>￥{{i.market}}</td>
                        <td>￥{{i.vip}}</td>
                        <td>{{i.reset}}件</td>
                        <td><span v-if="i.deserve" class="green">✔</span><span v-if="!i.deserve" class="red">✘</span></td>
                        <td><span v-if="i.newPro" class="green">✔</span><span v-if="!i.newPro" class="red">✘</span></td>
                        <td><span v-if="i.hot" class="green">✔</span><span v-if="!i.hot" class="red">✘</span></td>
                        <td>
                            <img src="../images/operate_icon_09.jpg" alt="" v-on:click="update($index)" data-toggle="modal" data-target="#myModal" />
                            <img src="../images/operate_icon_11.jpg" alt="" v-on:click="dele($index)" />
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">修改</h4>
                                        </div>  
                                        <div class="modal-body">
                                            <p class="text-left">名称</p>
                                            <p><input type="text" v-model="name" class="form-control"></p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                            <button type="button" class="btn btn-primary" @click="save($index)">保存</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="select">
            <div class="select pull-left">
                <button class="btn btn-sm" v-on:click.prevent="deleteS" style="background:#555555;color:#fff;margin-left:10px;">批量删除</button>
            </div>
            <div class="page pull-right">
                <button class="btn btn-info btn-sm" v-on:click="first">首页</button>
                <button class="btn btn-sm" style="margin:0 5px;" v-for="(i,ind) in len" v-on:click="skip(ind)" :class="ind==cur?'sel':''">
                    {{ind+1}}
                </button>
                <button class="btn btn-info btn-sm" v-on:click="last">最后一页</button>
            </div>
        </div>
    </div>
</template> 
<script>    
    import Mock from "../js/mock"
    import common from "../js/common"
    import getStorage from "../js/getStorage"
    import $ from "../js/jquery-3.2.1.js"
    let data = null;
    let obj = Mock.mock({
        "data|26": [{
            "name": "@csentence(12,16)",
            "market|1-100.2": 1,
            "vip|1-100.2": 1,
            "reset|1-800": 1,
            "id|+1": 1,
            "flag":false,
            "sel|1":["面包","馒头"],
            "newPro|1":[false,true],
            "deserve|1":[false,true],
            "hot|1":[false,true]
        }]
    })
    export default{
        data(){
            return {
                list: [...getStorage("product"),...obj.data],
                all: false,
                len: Math.ceil(obj.data.length / 5),
                start: 0,
                end: 5,
                cur: 0,
                name:"",
                saveInd:0,
                txt:"",
                selTxt:""
            }
        },
        watch:{
            name(val,old){
            },
            len(val,old){
            }
        },
        computed:{
            filterList(){
                if(this.selTxt){
                    let txt = this.list.filter((obj)=>{
                        return JSON.stringify(obj).indexOf(this.selTxt)!=-1;
                    })
                    this.len = Math.ceil(txt.length / 5);
                    return txt;
                }
                this.len = Math.ceil(this.list.length / 5);
                return this.list;
            }
        },
        methods: {
            search(){
                this.selTxt = this.txt;
            },
            allSel() {
                this.all = !this.all;
                let that = this;
                this.list.slice(this.start,this.end).forEach(function(obj){
                    obj.flag = that.all; 
                })
            },
            singleClick(ind) {
                let that = this;
                this.list[ind].flag = !this.list[ind].flag;
                this.list.slice(this.start,this.end).forEach(function(obj){
                    if(!obj.flag) that.all = false;
                })
            },
            skip(ind) {
                this.cur = ind;
                this.countPage();
                this.all = false;
            },
            first() {
                this.cur = 0;
                this.countPage();
                this.all = false;
            },
            last() {
                this.cur = this.len - 1;
                this.countPage();
                this.all = false;
            },
            countPage() {
                this.start = this.cur * 5;
                this.end = this.start + 5;
            },
            dele(ind) {
                let dat = new Date()
                let del = this.list.splice(ind, 1)[0];
                this.len = Math.ceil(this.list.length / 5);
                del.delTime = dat.getFullYear()+"-"+(dat.getMonth()+1)+"-"+dat.getDate();
                common("del",del);
            },
            deleteS(){
                let fils = this.list.splice(this.start,this.end).filter(function(obj){
                    return obj.flag==false;
                })
                this.all = false;
                this.list = [...fils,...this.list];
                this.len = Math.ceil(this.list.length / 5);
            },
            update(ind) {
                this.name = this.list[ind].name;
                this.saveInd = ind;
            },
            save(ind){
                $('#myModal').modal('hide');
                this.list[this.saveInd].name = this.name;
            }
        }
    }
</script>